<template>
	
		<el-card style="height: 100%;">
		<div>
			<el-button @click="addd()">新增知识点</el-button>
			<el-dialog title="新增知识点" :visible.sync="dialogVisible" width="50%" >
				<el-lable for="test1">科目：
					<el-select placeholder="请选择课程" v-model="form.courseId" clearable>
						<el-option v-for="item in courses" :key="item.id" :value="item.id" :label="item.name">
						</el-option>
					</el-select>
				</el-lable>
				</br>
				<el-form v-if="form.courseId" :model="form" :rules="rules" ref="form">
				<el-form-item label="知识点:" label-width="100px" prop="name">
				<el-input v-if="form.courseId" placeholder="请输入内容" type="textarea" v-model="form.name"
					style=" padding: 20px;display: inline;"></el-input>
					</el-form-item>
					</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="qxqx()">取 消</el-button>
					<el-button type="primary" @click="save()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		
		<div>
			<el-dialog
			  title="提示"
			  :visible.sync="centerDialogVisible"
			  width="30%"
			  center>
			  
			 <el-form  :model="form" :rules="rules" ref="form">
			 <el-form-item label="知识点:" label-width="100px" prop="name">
			 <el-input  placeholder="请输入内容" type="textarea" v-model="form.name"
			 	style=" padding: 20px;display: inline;"></el-input>
			 	</el-form-item>
			 	</el-form>
				
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="centerDialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="saveq()">确 定</el-button>
			  </span>
			</el-dialog>
			
		</div>
		
		<div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="course.name" label="课程">
				</el-table-column>
				<el-table-column prop="name" label="知识点">
				</el-table-column>
				<el-table-column
				  fixed="right"
				  label="操作"
				  >
				  <template slot-scope="scope">
				    <el-button @click="deletea(scope.row)" type="text" size="small">删除</el-button>
					<el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
				  </template>
				</el-table-column>
			</el-table>
		</div>
		</el-card>
	
</template>

<script>
	export default {
		data() {
			return {
				form: {
					courseId: '',
					name: ''
				},
				courses: [],
				zhishi: [],
				dialogVisible: false,
				centerDialogVisible:false,
				tableData: [{ }],
				rules:{
				       name:[{required:true,message:'知识点不能为空',trigger:'blur'}],    
				     },
			}
		},
		// this.$ajax.post('course/courselist',{}).then(res=>{
		methods: {
			deletea(row) {
					  console.log(row)
					  this.$ajax.post('zhishi/delete',{"id":row.id}).then(res=>{
						 if(res.data.success){
							  this.zsdList()
						  } 
						 })
			},
			edit(e){
				this.form=e
				this.centerDialogVisible=true
				
			},
			qxqx(){
				
				this.dialogVisible=false
				
			},
			addd() {
				this.dialogVisible = true
			},
			zsdList() {
				this.$ajax.post("/zhishi/list", {}).then(res => {
					var result = res.data
					if (result.success) {
						this.tableData = result.data
					}
				})
			},
			
			getcourses() {
				this.$ajax.post('/course/courselist', {}).then(res => {
					console.log(res.data)
					var abc = res.data;
					this.courses = abc.data;
				})
			},
			save() {
				this.$ajax.post('/zhishi/save', this.form).then(res => {
					console.log(res);
					if (res.data.success) {
						this.$message({
							message: '保存成功',
							type: 'success'
						});
					}
					this.zsdList()
					this.dialogVisible = false
				})
			},
			saveq() {
				this.$ajax.post('/zhishi/save', this.form).then(res => {
					console.log(res);
					if (res.data.success) {
						this.$message({
							message: '恭喜你，',
							type: 'success'
						});
					this.zsdList()
					}
				})
					this.centerDialogVisible = false
			},
		},
		created() {
			this.zsdList()
			this.getcourses()
		}
	}
</script>

<style>
	#a1 {
		padding: 20px;
	}
</style>
